<script setup lang="ts">
import { ref, reactive } from "vue";
import { HxqSelect } from "vue-mobile-hxq";
import { optionsData } from "assets/js/constant.js";

const sel = ref("");

// 事件说明
const eventsDataSource = reactive([
  {
    name: "onConfirm",
    desc: "选择后触发事件",
    callbackParam: "{ selectedOptions }",
  },
]);
</script>
<template>
  <div class="public-flex-box">
    <div class="public-phone-title">基础用法</div>
    <div class="public-usage-box">
      <hxq-select
        v-model="sel"
        required
        label="下拉选择"
        :rules="[{ required: true, message: '此项必填' }]"
        :columns="optionsData"
      ></hxq-select>
    </div>
  </div>

  <div class="public-flex-box">
    <div class="public-phone-title">垂直布局</div>
    <div class="public-usage-box">
      <hxq-select
        v-model="sel"
        required
        vertical
        label="下拉选择"
        :rules="[{ required: true, message: '此项必填' }]"
        :columns="optionsData"
      ></hxq-select>
    </div>
  </div>
</template>
<style>
.van-overlay {
  position: absolute;
}
.van-popup {
  position: absolute;
  width: 100%;
  right: 24px;
}
</style>
